<template>
  <div class="slide-card">
    <div class="slide-item-title">
      {{ item.title }}
    </div>
    <div class="slide-item-msg">
      {{ item.datails }}
    </div>
    <div class="slide-other">
      <div class="otherts-item">
        <i class="el-icon-view"></i>
        {{ item.view }}
      </div>
      <div class="otherts-item">
        <i class="el-icon-view"></i>
        {{ item.branch }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      item: {
        title: '武汉道路环境共享项目',
        datails: '武汉市道路的几何形状、交通信号、路标、路面状况等信息',
        view: 120,
        branch: 1524
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.slide-card {
  padding: 24px;
  border-bottom: 1px solid rgb(238, 238, 238);
  height: 128px;
  .slide-other {
    display: flex;
    justify-content: flex-end;
    font-family: 思源黑体 CN;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.5px;
    letter-spacing: 0px;
    text-align: left;
    .otherts-item {
      margin-left: 10px;
    }
  }
  .slide-item-msg {
    color: rgb(122, 130, 145);
    font-family: 思源黑体 CN;
    font-size: 16px;
    margin-top: 5px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 45px;
  }
  .slide-item-title {
    color: rgb(68, 75, 86);
    font-family: 思源黑体 CN;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0px;
    text-align: left;
  }
}
</style>
